<template>
  <div class="controlMusic" @click="toggleMusic" @mouseenter="handleMouseEnter" @mouseleave="hangdleMouseLeave">
    <video width="320" height="50" class="video" ref="music" loop>
      <source src="https://mp3.itingwa.com/2011-03/27/20110327015959-NTUwOTE1.mp3" type="video/mp4">
    </video>
    <div class="playBtn" v-if="showPlay"><i class="fa fa-play"></i></div>
    <div class="playBtn" v-if="showStop"><i class="fa fa-stop"></i></div>
  </div>
</template>

<script>
export default {
  name: 'music',
  data () {
    return {
      paly: false,
      showStop: false,
      showPlay: false
    }
  },
  methods: {
    toggleMusic () {
      if (this.play) {
        this.showPlay = false
        this.showStop = true
        this.$refs.music.pause()
      } else {
        this.showPlay = true
        this.showStop = false
        this.$refs.music.play()
      }
      this.play = !this.play
    },
    handleMouseEnter () {
      if (this.play) {
        this.showPlay = false
        this.showStop = true
      } else {
        this.showPlay = true
        this.showStop = false
      }
    },
    hangdleMouseLeave () {
      this.showPlay = false
      this.showStop = false
    }
  }
}
</script>

<style scoped lang="stylus">
  @keyframes rotation
    from {transform: rotate(0deg);
    }to {
       transform: rotate(360deg);
     }
  .video
    display: none
  .controlMusic
    width: 50px;
    height: 50px;
    background:url("https://20181106.oss-cn-beijing.aliyuncs.com/cat.jpg") no-repeat;
    background-size: 50px 50px;
    border-radius: 50%;
    position absolute;
    top: 62%;
    right: 0.7rem;
    z-index: 99;
    animation: rotation 8s linear infinite;

  .playBtn
    display: block;
    width: 50px;
    height:50px;
    line-height :50px;
    border-radius :50%;
    text-align :center;
    background-color:#fff;
    filter:Alpha(Opacity=60);
    opacity:0.61;
    animation: none

</style>
